<template>
  <div class="banner-container">
    <ul class="bot-nav">
      <li>
        <nuxt-link 
          to="/"
          class="takeout"
        >美团外卖</nuxt-link>
      </li>
      <li>
        <nuxt-link 
          to="/"
          class="movie"
        >猫眼电影</nuxt-link>
      </li>
      <li>
        <nuxt-link 
          to="/"
          class="hotel"
        >美团酒店</nuxt-link>
      </li>
      <li>
        <nuxt-link 
          to="/"
          class="apartment"
        >民宿/公寓</nuxt-link>
      </li>
      <li>
        <nuxt-link 
          to="/"
          class="business"
        >商家入驻</nuxt-link>
      </li>
      <li>
        <nuxt-link 
          to="/"
          class="commonweal"
        >美团公益</nuxt-link>
      </li>
    </ul>
    <div class="top section">
      <!-- 跑马灯 -->
      <div
        class="banner item" 
      >
        <carousel-com />
      </div>

      <a 
        href="" 
        class="item hidden"
      >
        <div 
          class="center-pic" 
          style="background-image:url(http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg)" />
      </a>

      <div class="login item">
        <div class="avatar">
          <img 
            :src="userAvatar" 
            alt=""
          >
        </div>
        <p class="nickname">Hi！你好</p>
        <el-button round>
          <nuxt-link to="/register">注册</nuxt-link>
        </el-button>
        <el-button round>
          <nuxt-link to="/login">立即登录</nuxt-link>
        </el-button>
      </div>
    </div>

    <div class="bottom section">
      <!-- 跑马灯 -->
      <div class="banner item">
        <a href="#">
          <div 
            class="pic" 
            style="background-image:url(http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png" 
          />
        </a>
        <a href="#">
          <div 
            class="pic" 
            style="background-image:url(http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg" 
          />
        </a>
      </div>

      <a 
        href="" 
        class="item hidden"
      >
        <div 
          class="center-pic" 
          style="background-image:url(http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg)" />
      </a>

      <div class="login item phone-version">
        <div class="qrcode-box">
          <img 
            src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png" 
            alt="下载APP"
          >
        </div>
        <p class="txt">美团APP手机版</p>
        <p class="sl">
          <span class="red">1元起</span>
          <span class="gary">吃喝玩乐</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import CarouselCom from './Carousel.vue'

export default {
  components: {
    CarouselCom
  },
  data() {
    return {
      isLogin: false
    }
  },
  // asyncData() {
  //   return {
  //     banners: [
  //       'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg',
  //       'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg',
  //       'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg',
  //       'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg',
  //       'http://p1.meituan.net/codeman/e419ae8488f776407459b0ee7eada070286451.jpg'
  //     ]
  //   }
  // },
  computed: {
    userAvatar() {
      return this.isLogin ? '' : '//s0.meituan.net/bs/fe-web-meituan/2d05c2b/img/avatar.jpg'
    }
  }
}
</script>

<style lang="stylus" scoped>
  @media screen and (max-width 1200px)
    .banner-container
      width 710px
    .hidden
      display none 
    .login
      float right !important 
    .banner
      width 470px !important 
      .pic
        width 230px !important 
        background-position 0 !important 
  .banner-container
    position relative
    .bot-nav
      position absolute 
      left 36px
      top -45px
      li
        display inline-block
        a
          padding 0 16px
          display block
          color #222
          font-weight 700
          font-size 16px
          cursor pointer
          &.takeout:hover
            color #fbc700
          &.movie:hover
            color #ed1e24
          &.hotel:hover
            color #f04d4e
          &.apartment:hover
            color #FDC411
          &.business:hover
            color #31BBAC
          &.commonweal:hover
            color #f04d4e
        &:first-child
          a
            padding-left 0
  .section
    &::after
      content ' '
      display block
      visibility hidden
      height 0
      clear both
  .top
    height 240px
  .bottom
    height 165px
    margin-top 10px
  .item
    float left
    height 100%
  .banner
    width 550px
    background-color #ffffff
    a
      float left
      .pic
        width 270px
        height 165px
        background-size 270px
        background-position 50%
        background-repeat no-repeat
      &:last-child
        float right
  .center-pic
    width 150px
    height 100%
    margin-left 10px
    margin-right 10px
    background-size 150px
    background-position 50%
    background-repeat no-repeat
  .login
    width 228px
    padding-top 30px
    background-color #ffffff
    border 1px solid #e5e5e5
    box-sizing border-box
    text-align center
    &.phone-version
      padding-top 0
    .avatar
      margin 0 auto 4px
      border-radius 50%
      img 
        width 47px
        height 47px
        border-radius 50%
        border 4px solid #e5e5e5
    .txt
      overflow hidden
      width 6em
      margin 0 auto
      font-size 16px
      color #222222
      font-weight 500
      white-space nowrap 
      text-overflow ellipsis
    .el-button
      display block
      width 118px
      margin 10px auto 12px
      font-size 14px
      a:hover
        color #333333
    .qrcode-box
      margin 10px auto 0
      img 
        width 95px
        height 95px
    .sl
      margin-top 2px
      font-size 12px
      font-weight 500
      .red
        margin-right 5px
        color #ec5330
      .gary
        color #3f3f3f
</style>
